<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<title>租房</title>
	<link href="/myhouse/static/web/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="/myhouse/static/web/js/jquery.min.js"></script>
	<!-- Custom Theme files -->
	<!--menu-->
	<script src="/myhouse/static/web/js/scripts.js"></script>
	<link href="/myhouse/static/web/css/styles.css" rel="stylesheet">
	<!--//menu-->
	<!--theme-style-->
	<link href="/myhouse/static/web/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!--//theme-style-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Real Home Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

</head>
<style>
	.mydiv{
		padding: 1.5em;
		background: #fff;
		border:1px solid black;
		width: 200px;
		height: 400px;
	}
	.mydiv p{
		font-size: 0.8em;
		display: block;
		color: #A3A3A3;
		margin: 0 0 0.4em;
	}
	.myspan{
		display: block;
		width:40px;
		height: 40px;
		color: #fff;
		font-size: 0.8em;
		text-align: center;
		line-height: 3.3em;
		position:static;
		top: 50px;

	}
	.mydiv span{
		display: block;
		width:40px;
		height: 40px;
		color: #fff;
		font-size: 0.8em;
		text-align: center;
		line-height: 3.3em;
	}
	.mydiv {
		padding: 0.5em;
	}
	.mydiv2 {
		padding: 0 0 1em;
	}
	.mydiv3 {
		/*background: url(/myhouse/static/web/images/star1.png) 0px 0px no-repeat;*/
		float: left;
	}
	.mydiv4 {
		float: left;
		margin-left: 8%;
	}
	.mydiv4 strong {
		font-size: 1em;
		display: block;
		color: #000;
	}
	.mydiv4 small {
		font-size: 0.7em;
		color: #A3A3A3;
	}
	#bydiv{
		float: left;
		margin-left: 50px;

	}
</style>
<style>
	.right-side .more .spantext{
		color: #27DA93;
	}
	.right-side .more .spantext:hover{
		color: white;
	}
</style>
<body>
<!--header-->
<script type="text/javascript">
	$(function() {
		var menu_ul = $('.menu > li > ul'),
				menu_a  = $('.menu > li > a');
		menu_ul.hide();
		menu_a.click(function(e) {
			e.preventDefault();
			if(!$(this).hasClass('active')) {
				menu_a.removeClass('active');
				menu_ul.filter(':visible').slideUp('normal');
				$(this).addClass('active').next().stop(true,true).slideDown('normal');
			} else {
				$(this).removeClass('active');
				$(this).next().stop(true,true).slideUp('normal');
			}
		});

	});
</script>
<jsp:include page="/inc/head.jsp"></jsp:include>
<!--//-->
<div class=" banner-buying">
	<div class=" container">
		<h3><span>MY</span>house</h3>
		<!---->
		<jsp:include page="/inc/menu.jsp"></jsp:include>
		<div class="clearfix"> </div>
		<!--initiate accordion-->
		<script type="text/javascript">
			$(function() {
				var menu_ul = $('.menu > li > ul'),
						menu_a  = $('.menu > li > a');
				menu_ul.hide();
				menu_a.click(function(e) {
					e.preventDefault();
					if(!$(this).hasClass('active')) {
						menu_a.removeClass('active');
						menu_ul.filter(':visible').slideUp('normal');
						$(this).addClass('active').next().stop(true,true).slideDown('normal');
					} else {
						$(this).removeClass('active');
						$(this).next().stop(true,true).slideUp('normal');
					}
				});

			});
		</script>

	</div>
</div>

<!--//header-->
<div class="container">
	<form method="get" action="/myhouse/web/renting" id="myform">
	<!--price-->
	<div class="price">
		<div class="price-grid">
			<input type="hidden" name="pon" >
			<div class="col-sm-4 price-top">
				<h4>区县</h4>
				<select class="in-drop" id="city" name="city">
					<option>选择区县</option>
					<c:forEach items="${requestScope.list}" var="list">
						<option>${list.cityName}</option>
					</c:forEach>
				</select>
			</div>
			<div class="col-sm-4 price-top" >
				<h4>类别</h4>
				<select class="in-drop" id="type" name="type">
					<option>选择类别</option>
					<c:forEach items="${requestScope.typelist}" var="typelist">
						<option>${typelist.typeName}</option>
					</c:forEach>

				</select>
			</div>
			<div class="col-sm-4 price-top">
				<h4>房间</h4>
				<select class="in-drop" name="room" id="room">
					<option>卧室数量</option>
					<c:forEach items="${requestScope.roomlist}" var="roomlist">
						<option>${roomlist.roomNum}</option>
					</c:forEach>
				</select>
			</div>
			<div class="clearfix"> </div>
		</div>
			<input type="submit" value="搜索" style="margin-left: 500px" style="margin-bottom: -50px">
	</div>
</form>

	<!---->
<script src="/myhouse/static/web/js/jquery.min.js"></script>

	<script>
		$(function (){
			$("#myform").submit(nnd)

		})
		function nnd (){
			let citys =  $("#city").val();
			let type =  $("#type").val();
			let romms =  $("#room").val();

			if(citys == "选择区县" && type == "选择类别" && romms == "卧室数量"){
				return false;
			}else {
				return true;
			}

		}
	</script>
	<div class="top-grid">
		<h3>热门区域</h3>
		<div class="grid-at">
			<div class="col-md-3 grid-city">
				<a href="http://localhost:8080/myhouse/web/renting?pon=&city=%E5%B8%82%E5%8D%97%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
				<div class="grid-lo">
						<figure class="effect-layla">
							<img class=" img-responsive" src="/myhouse/static/web/images/ce.jpg" alt="img06">
							<figcaption>
								<h4>市南区</h4>
							</figcaption>
						</figure>
				</div>
				</a>
			</div>
			<div class="col-md-3 grid-city">
				<a href="http://localhost:8080/myhouse/web/renting?pon=&city=%E5%B8%82%E5%8C%97%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
				<div class="grid-lo">
						<figure class="effect-layla">
							<img class=" img-responsive" src="/myhouse/static/web/images/ce1.jpg" alt="img06">
							<figcaption>
								<h4>市北区</h4>
							</figcaption>
						</figure>
				</div>
				</a>
			</div>
			<div class="col-md-6 grid-city grid-city1">
				<div class="grid-me">
					<div class="col-md-8 grid-lo1">
						<a href="http://localhost:8080/myhouse/web/renting?pon=&city=%E6%9D%8E%E6%B2%A7%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
						<div class=" grid-lo">
								<figure class="effect-layla">
									<img class=" img-responsive" src="/myhouse/static/web/images/ce2.jpg" alt="img06">
									<figcaption>
										<h4 class="effect1">李沧区</h4>
									</figcaption>
								</figure>
						</div>
						</a>
					</div>
					<div class="col-md-4 grid-lo2">
						<a href="http://localhost:8080/myhouse/web/renting?pon=&city=%E5%B4%82%E5%B1%B1%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
						<div class=" grid-lo">
								<figure class="effect-layla">
									<img class=" img-responsive" src="/myhouse/static/web/images/ce3.jpg" alt="img06">
									<figcaption>
										<h4 class="effect2">崂山区</h4>

									</figcaption>
								</figure>
						</div>
						</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="grid-me">
					<div class="col-md-6 grid-lo3">
						<a href="http://localhost:8080/myhouse/web/renting?pon=&city=%E5%9F%8E%E9%98%B3%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
						<div class=" grid-lo">
								<figure class="effect-layla">
									<img class="img-responsive" src="/myhouse/static/web/images/ce4.jpg" alt="img06">
									<figcaption>
										<h4 class="effect3">城阳区</h4>

									</figcaption>
								</figure>
						</div>
						</a>
					</div>
					<div class="col-md-6 grid-lo4">
						<a href="http://localhost:8080/myhouse/web/renting?pon=&city=%E9%BB%84%E5%B2%9B%E5%8C%BA&type=%E9%80%89%E6%8B%A9%E7%B1%BB%E5%88%AB&room=%E5%8D%A7%E5%AE%A4%E6%95%B0%E9%87%8F">
						<div class=" grid-lo">
								<figure class="effect-layla">
									<img class="img-responsive" src="/myhouse/static/web/images/ce5.jpg" alt="img06">
									<figcaption>
										<h4 class="effect3">黄岛区</h4>
									</figcaption>
								</figure>
						</div>
						</a>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>

	</div>
	<div class="future">
		<c:if test="${empty requestScope.houseList}">
			<div style="height: 100px;">
				<span style="position: relative;left: 450px;top: 50px;">没有找到符合条件的房屋</span>
			</div>
		</c:if>
		<c:if test="${not empty requestScope.houseList}">
			<h3>出租屋预览</h3>
			<div class="content-bottom-in">
				<ul id="flexiselDemo1">
						<%--	<img class="img-responsive" src="/myhouse/static/uploadImages/202501081736314908264074570.webp" alt="" />			--%>
					<c:forEach items="${requestScope.houseList}" var="house">
						<li><div class="project-fur">
							<div style="width: 226px; height: 180px ;">
								<img style="width: 100%; height: 100%;" class="img-responsive" src="/myhouse/static/uploadImages/${house.showImg}" alt="" />
							</div>
							<div class="fur">
								<div class="fur1">
									<span class="fur-money">面积:${house.area} ㎡</span>
									<h6 class="fur-name">类型:${house.type}</h6>
									<span>区县:${house.city}</span><br>
									<c:if test="${house.sold == false}">
										<span>已出租<span>
									</c:if>
									<c:if test="${house.sold == true}">
										<span>未出租</span>
									</c:if>
								</div>
								<div class="fur2">
									<span>房间数:${house.room}间</span>
									<br>
									<div class="right-side" style="display: flex; width: 600px">
										<a href="/myhouse/web/contact?id=${house.id}&&mediatorId=${house.mediatorId}" style="height: 30px;width: 70px;float: left" class="hvr-sweep-to-right more"><span class="spantext">联系我</span></a>
										<a href="/myhouse/web/single?id=${house.id}" style="height: 30px;width: 70px; margin-left: 40px; float: right" class="hvr-sweep-to-right more"><span class="spantext">查看详情</span></a>
									</div>
								</div>
							</div>
						</div>
						</li>
					</c:forEach>
				</ul>
				<script type="text/javascript">
					$(window).load(function() {
						$("#flexiselDemo1").flexisel({
							visibleItems: 4,
							animationSpeed: 1000,
							autoPlay: true,
							autoPlaySpeed: 3000,
							pauseOnHover: true,
							enableResponsiveBreakpoints: true,
							responsiveBreakpoints: {
								portrait: {
									changePoint:480,
									visibleItems: 1
								},
								landscape: {
									changePoint:640,
									visibleItems: 2
								},
								tablet: {
									changePoint:768,
									visibleItems: 3
								}
							}
						});

					});
				</script>
				<script type="text/javascript" src="/myhouse/static/web/js/jquery.flexisel.js"></script>
			</div>
		</c:if>
	</div>


</div>


		</div>
	</div>
</div>

<!--footer-->
<jsp:include page="/inc/footer.jsp"></jsp:include>
<!--//footer-->
</body>
</html>